<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>JavaScripTools Manual</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>

<body>
<br>
<h1>JavaScripTools Manual</h1>
<h2>InputMask</h2>
<h3>Introduction to InputMask</h3>
<p>InputMask is a script that contains several masks - classes that format and
restrict the user input on form fields. There are 4 types of masks: <ul>
<li><a href="InputMask_mask.html">InputMask</a>: General purpose mask. It can be used to restric which characters
the user may type, as well as applying separator and size constraints</li>
<li><a href="InputMask_number.html">NumberMask</a>: A number specific mask. Uses a 
<a href="Parsers_number.html">NumberParser</a> to determine the mask format.</li>
<li><a href="InputMask_date.html">DateMask</a>: A date specific mask. Uses a 
<a href="Parsers_date.html">DateParser</a> to determine the mask format.</li>
<li><a href="InputMask_size.html">SizeLimit</a>: Used to restrict the number of characters that can be typed
on a textarea field.</li>
</ul></p>
<p>All masks follows these rules:<ul>
<li>The mask is applied using it's constructor. After the mask is instantiated, the control is
already bound to the mask. The mask property <code>control</code> is the control reference, and the property 
<code>mask</code> is added to the control. See each mask for more details.</li>
<li>Currently, masks works better on Internet Explorer and Gecko based browsers (Mozilla, Firefox, Seamonkey, ...).
Other W3C compilant browsers (like Opera and Konqueror) are supported, but the input value is changed only on the blur event.
This is because the lack of support for caret operations. As a consequence the input value cannot be modified "on the fly",
so, only on blur, the mask will be applied. Characters, however, are successfully filtered.</li>
<li>Starting at version 2.1, the masks allows event handlers for keydown, keyup, keypress and blur to be set on 
the INPUT tag, but you can, like before, set these properties:<ul>
    <li>keyPressFunction: Called on the onkeypress event</li>
    <li>keyUpFunction: Called on the onkeyup event</li>
    <li>keyDownFunction: Called on the onkeydown event</li>
    <li>blurFunction: Called on the onblur event</li>
    <li>changeFunction: Called on the onchange event</li>
    <li>updateFunction: Not a standard event, but called whenever the mask is applied</li>
    </ul>
    Here is an example usage (using the with statement):
<pre>with (new InputMask("AA/##", "myControl")) {
    keyUpFunction = function(event, mask) {
        setValue("output", "A key was pressed. My current value is " + mask.control.value)
    };
    updateFunction = function(mask) {
        setValue("output", "I have been updated. My current value is " + mask.control.value)
    };
};
</pre><b>Important</b>: The standard event handlers (keyPressFunction, keyUpFunction, keyDownFunction and blurFunction)
are evaluated by the control, so, inside the code, <code>this</code> refers to the control (this has been changed on version
2.1, so, the same event handler you would normally use on a control you can use with the mask). The updateFunction, that is
mask specific, is evaluated by the mask, so, this refers to the mask.<br>
<b>Important 2</b>: Internet Explorer does not triggers onchange events when the masks are used, but the mask emulates it,
calling the changeFunction even on Internet Explorer.
</li>
<li>One more thing, quite obvious, but many people don't realize that the code that creates the masks must run
after the controls have been created. Normally, people put the script tag before the body tag.
If you put the mask creation code directly there, at the moment it's evaluated, there are no form
fields yet. So, you can create a function, for example, called setup, and place it's call on the body
onload event. Another approach is to create a script tag directly on the body, after the input tags</li>
</ul></p>
<br><br>
<hr>
<table width="100%">
    <tr>
        <td width="33%" align="left"><b>Previous:</b><br><a href="Parsers_other.html">Other parsers</a></td>
        <td width="34%" align="center"><a href="index.html">Table of Contents</a></td>
        <td width="33%" align="right"><b>Next:</b><br><a href="InputMask_mask.html">Working with the InputMask</a></td>
    </tr>
</table>

</body>
</html>
